<template>
    <section class="widthdraw-cord-info-main base-main">
      <div class="title fs13 text-c">
        每月15号可申请上个月的佣金，提交后5个工作日内打款
      </div>
      <div class="cord-box">
        <van-cell-group>
          <van-field
            label="卡号"
            type="text"
            clearable
            v-model="cordNum"
            @keyup="cordNum =cordNum.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ');"
            @blur="verifyCardNum"
            :error-message="cordNumErrorMessage"
            placeholder="储蓄卡号" />
          <van-field
            label="银行"
            v-model="bank"
            clearable
            placeholder="所属银行"
            :error-message="bankErrorMessage"/>
          <van-field
            label="所属支行"
            v-model="subbranchBank"
            clearable
            placeholder="请填写所属支行名称"
            :error-message="subbranchBankErrorMessage"/>
        </van-cell-group>
        <p class="pop-text color7A7B82 fs13 text-l">
          温馨提示：填写银行卡号时请认真核对，以免填写错误。
        </p>
        <van-field
          v-model="withdrawAmount"
          class="withdraw-namount"
          type="number"
          center
          clearable
          label="提现金额"
          placeholder="提现金额不可低于100.00元"
        >
          <van-button @click="handleWithdrawnAll" class="color7E82F6 fs14" slot="button" size="small" type="default">全部提现</van-button>
        </van-field>
        <p class="error-pop bgcFFF fs12" v-if="withdrAwnamountErrorMessage">{{withdrAwnamountErrorMessage}}</p>
        <p class="pop-text color7A7B82 fs13 text-l">
          当月可提现余额：{{canWithdrawnAll | thousands}}元
        </p>
      </div>
      <p class="sub-btn text-c">
        <span class="base-btn inline-block" @click="handleNextStep">下一步</span>
      </p>
    </section>
</template>

<script type="text/ecmascript-6">
  import { cardNumber } from  '../../assets/js/cardNumber';

  export default {
    data() {
      return {
        cordNumList:cardNumber.bankcardList,
        cordNum:'',//卡号
        bank:'',//所属银行
        subbranchBank:'',//所属支行
        withdrawAmount:'',//提现金额
        canWithdrawnAll:'28200.00',//可提现余额
        cordNumErrorMessage:'',//银行卡号错误提示
        bankErrorMessage:'',//所属银行错误提示
        subbranchBankErrorMessage:'',//所属支行错误提示
        withdrAwnamountErrorMessage:'',//提现金额错误提示
      }
    },
    watch: {
      'withdrawAmount':function(newVal, oldVal) {
        if(newVal > Number(this.canWithdrawnAll)){
          this.withdrAwnamountErrorMessage = '余额不足'
        }else{
          this.withdrAwnamountErrorMessage = ''
        }
      },

    },
    created(){
      this.cordNum = localStorage.getItem('cardNum') ? localStorage.getItem('cardNum') : '';
      this.bank = localStorage.getItem('bank') ? localStorage.getItem('bank') : '';
      this.subbranchBank = localStorage.getItem('subbranchBank') ? localStorage.getItem('subbranchBank') : '';
      this.withdrawAmount = localStorage.getItem('withdrawAmount') ? localStorage.getItem('withdrawAmount') : '';
    },
    filters:{
      thousands(num){
        num = num.toString();   //将输入的数字转换为字符串
        if(/^-?\d+\.?\d+$/.test(num)){  //判断输入内容是否为整数或小数
          if(/^-?\d+$/.test(num)){    //判断输入内容是否为整数
            num =num + ",00";   //将整数转为精度为2的小数，并将小数点换成逗号
          }else{
            num = num.replace(/\./,',');    //将小数的小数点换成逗号
          }
          while(/\d{4}/.test(num)){ //
            /***
             *判断是否有4个相连的数字，如果有则需要继续拆分，否则结束循环；
             *将4个相连以上的数字分成两组，第一组$1是前面所有的数字（负数则有符号），
             *第二组第一个逗号及其前面3个相连的数字；
             * 将第二组内容替换为“,3个相连的数字，”
             ***/
            num = num.replace(/(\d+)(\d{3}\,)/,'$1,$2');
          }
          num = num.replace(/\,(\d*)$/,'.$1');   //将最后一个逗号换成小数点
        }
        return num
      },
    },
    methods: {
      handleNextStep(){
        if(this.cordNum == ''){
          this.cordNumErrorMessage == '请填写银行卡号';
          return false;
        }else if(this.bank == ''){
          this.bankErrorMessage = '请填写卡号所属银行';
          return false;
        }else if(this.subbranchBank == ''){
          this.subbranchBankErrorMessage = '请填写卡号所属支行';
          return false;
        }else if(this.withdrawAmount == ''){
          this.withdrAwnamountErrorMessage = '请填写提现金额';
          return false;
        }else if(this.withdrawAmount > Number(this.canWithdrawnAll)){
          this.withdrAwnamountErrorMessage = '余额不足';
          return false;
        }else{

          localStorage.setItem('cardNum',this.cordNum.replace(/\s/g,''));
          localStorage.setItem('bank',this.bank);
          localStorage.setItem('subbranchBank',this.subbranchBank);
          localStorage.setItem('withdrawAmount',this.withdrawAmount);
          this.$router.push({
            name:'withdrawUserInfo'
          })
        }
      },
      //银行卡校验
      verifyCardNum(){
        let num = this.cordNum;
        //去掉空格
        num = num.replace(/\s/g, "");
        //判断卡号是否正确
        for (let i = 0,len = this.cordNumList.length; i < len; i++) {
          for (let j = 0,regLen = this.cordNumList[i].patterns.length; j < regLen; j++) {
            let reg = this.cordNumList[i].patterns[j].reg.test(num);
            if(reg){
              this.bank = this.cordNumList[i].bankName
              return false;
            }
          }
        }
      },
      //全部提现
      handleWithdrawnAll(){
        this.withdrawAmount = Number(this.canWithdrawnAll)
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/withdrawCordInfo.scss';
</style>
